<template>
	<div class="liveDataTotal w944">
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>课程数据——{{updateTitle}}</p>
		</div>
		<div class="ruzhu">
			<ul>
				<li class="rowLi01" style="margin-left: 0;">
					<p>总学习人数</p>
					<h3>{{totalClickCount}}</h3>
				</li>
				<li class="rowLi02">
					<p>本月学习人数</p>
					<h3>{{thisMonthClickCount}}</h3>
				</li>
				<li class="rowLi03">
					<p>新增学习人数</p>
					<h3>{{thisMonthAddClickCount}}</h3>
				</li>
				<li class="rowLi04">
					<p>总完成人数</p>
					<h3>{{totalStudyFinishCnt}}</h3>
				</li>
			</ul>
		</div>
		<div class="chartClassification clearFix">
			<div class="firstCol">
				<div class="chartLeft">
					<div id="myChart" :style="{width: '100%', height: '400px'}"></div>
				</div>
				<div class="chartRight">
					<div id="myChartPie" :style="{width: '100%', height: '400px'}"></div>
				</div>
			</div>
			<div class="secondCol">
				<div class="chartLeft">
					<div id="myChartPieArea" :style="{width: '100%', height: '400px'}"></div>
				</div>
				<div class="chartRight">
					<div id="myChartLine" :style="{width: '100%', height: '400px'}"></div>
				</div>
			</div>
		</div>
		
		
	</div>
</template>
<script>
	import echarts from 'echarts';
	export default{
		data(){
			return{
				liveId:'',
				updateTitle:'',
				teacherTitle:'',
				courseCompanyid:'',
				lecturerid:'',
				pageTypeNum:'',
				totalClickCount:'',
				thisMonthClickCount:'',
				thisMonthAddClickCount:'',
				totalStudyFinishCnt:'',
				histogramList:[],
				compareList: [],
	            compareListName:[],
	            userAreaList:[],
	            userAreaListName:[],
	            zxtMap:[],
	            zxtMapName:[],
	            mapTitleLegend:[],
	            zxtListName:'',
	            zxtListData:[]
			}
		},
		methods:{
			getParams() {
				this.liveId = this.$route.params.liveId;
				this.updateTitle = this.$route.params.updateTitle;
				this.teacherTitle = this.$route.params.teacherTitle;
				this.lecturerid = this.$route.params.lecturerid;
				this.pathKey = this.$route.params.pathKey;
				this.nowBack = this.$route.params.nowBack;
				console.log('liveData:',this.$route.params);
			},
			histogram() {
                // 柱状图 实例化echarts对象
                let myChart = echarts.init(document.getElementById('myChart'));
                var option = {
				    title: {text: '月度学习情况'},
				    legend: {},
				    tooltip: {},
				    dataset: {source:this.histogramList},
				    xAxis: {type: 'category'},
				    yAxis: {},
				    grid: {x: '50px'},
				    series: [
				    	{type: 'bar',name:'学习人数'},
				        {type: 'bar',name:'完成人数'},
				        {type: 'bar',name:'新增人数'},
				        {type: 'bar',name:'点赞人数'}
				    ]
				};
                myChart.setOption(option, true);
            },
            pieChart(){
            	let myChartPie = echarts.init(document.getElementById('myChartPie'));
            	var option = {
				    title : {text: '同比上月数据'},
				    tooltip : {trigger: 'item'},
				    legend: {
				    	x:'left',
				    	padding:[40,0,0,0],
				        data: this.compareListName,
				    },
				    series : [{
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '50%'],
			            data:this.compareList,
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			       	}]
				};
				myChartPie.setOption(option, true);
            },
            pieChartArea(){
            	let myChartPieArea = echarts.init(document.getElementById('myChartPieArea'));
            	var option = {
				    title : {text: '学员地区分析'},
				    tooltip : {trigger: 'item'},
				    legend: {
				    	x:'left',
				    	orient: 'vertical',
				    	padding:[40,0,0,0],
				        data: this.userAreaListName
				    },
				    series : [{
			            type: 'pie',
			            radius : '55%',
			            center: ['60%', '50%'],
			            data:this.userAreaList,
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			       	}]
				};
				myChartPieArea.setOption(option, true);
            },
            lineChart(){
            	let myChartLine = echarts.init(document.getElementById('myChartLine'));
            	var option = {
				    title: {
				        text: '折线图堆叠'
				    },
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				        data:this.mapTitleLegend
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: this.zxtMapName
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: this.zxtMap
				};
				myChartLine.setOption(option, true);
            },
			GetTongJiList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getLiveBroadcastCourseStatistics?"+'courseId='+this.liveId,
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							var s = res.data.data;
			 				this.totalClickCount = s.totalClickCount;
							this.thisMonthClickCount = s.thisMonthClickCount;
							this.thisMonthAddClickCount = s.thisMonthAddClickCount;
							this.totalStudyFinishCnt = s.totalStudyFinishCnt;
							this.histogramList = s.zztList;
							this.compareList = s.compareList;
							this.userAreaList = s.userArea;
							
							this.mapTitleLegend = s.zxtMap.legend.split(',');
							let m = s.zxtMap.seriesDataList;
							m.forEach(element => {
								var obj = {
									name:element.name,
									type:'line',
									data:element.data
								};
								this.zxtMap.push(obj);
							});
							if(this.compareList!=null){
								this.compareList.forEach(element => {
									this.compareListName.push(element.name);
								})
							};
							if(this.userAreaList!=null){
								this.userAreaList.forEach(element => {
									this.userAreaListName.push(element.name);
								})
							};
							if(this.zxtMap!=null){
								this.zxtMapName = s.zxtMap.xAxisDataList
							};
							this.histogram();
							this.pieChart();
							this.pieChartArea();
							this.lineChart();
						}
					}
				});
			},
			reBack(){
				console.log('返回值：',this.pathKey);
				this.$router.push({
					name: this.pathKey,
					params: {
						updateTitle:this.teacherTitle,
						teacherTitle:this.teacherTitle,
						lecturerid:this.lecturerid,
						nowBack:this.nowBack
					}
				})
			}
		},
		mounted(){
			this.getParams();
			if(this.liveId==null||this.updateTitle==null){
				this.$store.commit('GET_LIVE_DATA');
				var s =this.$store.state.livedata;
				this.liveId=s.liveId,
				this.updateTitle=s.updateTitle;
				this.teacherTitle = s.teacherTitle;
				this.lecturerid = s.lecturerid;
				this.pathKey = s.pathKey;
				this.nowBack = s.nowBack
			}
			this.GetTongJiList();
			window.addEventListener("beforeunload",()=>{
				s={
					liveId : this.liveId,
					updateTitle:this.updateTitle,
					teacherTitle:this.teacherTitle,
					lecturerid:this.lecturerid,
					pathKey:this.pathKey,
					nowBack:this.nowBack
				}	
				this.$store.commit('SET_LIVE_DATA', s);
			});
			
			this.$nextTick(function() {
                this.histogram();
                this.pieChart();
                this.pieChartArea();
                this.lineChart();
            });
		}
	}
</script>
<style type="text/css">
	.liveDataTotal{padding-bottom: 100px;}
	.liveDataTotal .ruzhu {width:100%;height:100px;margin:30px 0;}
	.liveDataTotal .ruzhu li {width:23.5%;height:100px;float:left;margin-left:2%;}
	.liveDataTotal .ruzhu li p {font-size:16px;color:#fff;text-align:center;padding:17px 0 7px;}
	.liveDataTotal .ruzhu li h3 {font-size:30px;color:#fff;text-align:center;}
	.liveDataTotal .ruzhu .rowLi01{background: #6CADFB;}
	.liveDataTotal .ruzhu .rowLi02{background: #FED406;}
	.liveDataTotal .ruzhu .rowLi03{background: #44CEF6;}
	.liveDataTotal .ruzhu .rowLi04{background: #FB6260;}
	.liveDataTotal .chartClassification{width: 100%;}
	.liveDataTotal .chartClassification .firstCol,.liveDataTotal .chartClassification .secondCol{overflow: hidden;margin-bottom: 40px;}
	.liveDataTotal .chartLeft{width: 65%;height: 400px;float: left;}
	.liveDataTotal .chartRight{width: 35%;height: 400px;float: right;}
	.liveDataTotal .secondCol .chartLeft{width: 35%;}
	.liveDataTotal .secondCol .chartRight{width: 65%;}
</style>